<template>
	<view class="">
		<z-paging  ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<TbarNav title="订单" :is_back="false" isbg="0" :stickys="true"
				:barStyle="{
					background:'transparent'
				}"
				></TbarNav>
			</template>
			<view class="tabs-warp">
				<view class="tab-item" 
					:class="{ active:type === item.type }" 
					v-for="(item,index) in tabList" :key="index"
					@click="mapList(item)"
				>
					{{item.text}}
				</view>
			</view>
			
			<view class="list">
				<view class="li" v-for="(item, index) in dataList" :key="index" >
					<view class="title">
						<view class="left">
							<text>{{item.add_time}}</text>
						</view>
						<view class="right">
							<text class="rest-time">待付款剩余：{{computedRestTime(item)}}</text>
						</view>
					</view>
					<view class="info">
						<view class="item-img">
							<image :src="item.images" mode=""></image>
						</view>
						<itemInfoCompVue style="height: 100%;" :item-info="item"></itemInfoCompVue>
					</view>
					<view class="prize">￥{{item.price}}</view>
					<view class="btn-group">
						<!-- <button class="btn-item">取消订单</button> -->
						<!-- <button class="btn-item">删除订单</button> -->
						<button v-if="item.status === 0" class="btn-item primary">立即支付</button>
						<button class="btn-item primary" @click="viewsDetail(item)"> 查看卷码</button>
					</view>
					<!-- <view class="title">
						<view class="left">
							<text>项目单号：{{item.order_no}}</text>
							<text>{{item.add_time}}</text>
						</view>
						<view class="right">
							<text>{{item.status == 1 ? '未使用' : item.status == 2 ? '已使用' : '待支付'}}</text>
						</view>
					</view> -->	
					<!-- <view class="info">
						<view class="item">
							<text>预约项目：</text>
							<text>{{item.project_title}}</text>
						</view>
						<view class="item">
							<text>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</text>
							<text>{{item.project_category_title}}</text>
						</view>
						<view class="item">
							<text>预定时间：</text>
							<text>{{item.reserve_date}}</text>
						</view>
						<view class="item">
							<text>支付费用：</text>
							<text class="red">￥{{item.price}}</text>
						</view>
					</view> -->
				<!-- 	<view class="mod">
						<view class="top" v-if="!item.qrshow">
							<view class="left">
								<text>限载人数：</text>
								<text>{{item.limited}}人</text>
							</view>
							<view class="right" v-if="type != 'staff'" @click="onQrshow(index)">
								<image :src="baseUrl+ '/static/wximages/icon-18.png'" mode="widthFix"></image>
								<image :src="baseUrl+ '/static/wximages/icon-13.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="m-info" v-else>
							<view class="qrcode">
								<image class="code-img" :src="item.qrcode_url" mode="widthFix"></image>
								<text>扫码核验使用</text>
								<view class="icon-con" @click="onQrshow(index)">
									<image class="icon" :src="baseUrl+ '/static/wximages/icon-13.png'" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</z-paging>
		<pageFooter ref="tabbarRef" class="tabbarComp"></pageFooter>
	</view>
</template>

<script>
	import TbarNav from '@/components/TbarNav'
	import itemInfoCompVue from '../../index/comp/itemInfoComp.vue';
	import { getProjectRecordList } from '@/api/reserve.js';
	import pageFooter from '@/components/pageFooter/index.vue'
	export default {
		components:{
			TbarNav,
			itemInfoCompVue,
			pageFooter
		},
		data() {
			return {
				tabList:[
					{
						type:'',
						text:'全部'
					},
					{
						type:0,
						text:'待付款'
					},{
						type:1,
						text:'已付款'
					},{
						type:2,
						text:'已完成'
					},
				],
				type: '',//默认查全部
				dataList: [],
				baseUrl: this.$baseUrl
			}
		},
		computed:{
			computedRestTime(){
				return function(item){
					if(!item) return ''
					const timeStep = item.reserve_date_start - item.reserve_date_end
					// const hour = new Date(timeStep).getHours()
					const minus = new Date(timeStep).getMinutes()
					const second = new Date(timeStep).getSeconds()
					return  `${minus}:${second}`
				}
			}
		},
		onLoad(ops) {
			if (ops.type) {
				this.type = +ops.type;
				console.log(this.type);
			}
		},
		onShow() {
		},
		methods: {
			onJmup(url) {
				uni.navigateTo({ url })
			},
			onQrshow(index) {
				this.dataList[index].qrshow = !this.dataList[index].qrshow
			},
			mapList(item){
				this.type = item.type
				this.queryList(1,10)
			},
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				const params = {
					page: pageNo,
					pageSize: pageSize,
					type: this.type
				}
				getProjectRecordList(params).then(res => {
					let arr = res?.data?.data || []
					 arr.forEach((item)=>{
						item.title = item.project_title
					})
					if(this.type !== ''){
						arr = arr.filter(item=>item.status == this.type)
					}
					this.$refs.paging.complete(arr);
					
				})
			},
			viewsDetail(itemInfo){
				console.log('item===>',itemInfo);
				uni.navigateTo({
					url:'/pages/reserve/project/orderDetail?infos='+encodeURIComponent(JSON.stringify(itemInfo||''))
				})
			}
		}
	}
</script>
<style>
	page {
		/* background: #003153; */
		/* background: #fff; */
		background: #F7F7F9;
	}
</style>
<style scoped lang="scss">
	.tabs-warp{
		margin-top: 40rpx;
		width: 100%;
		height: 72rpx;
		display: flex;
		font-size: 30rpx;
		color: #000000;
		padding: 0 20rpx;
		box-sizing: border-box;
		.tab-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tab-item.active{
			background: #FFFFFF;
			border-radius: 36rpx;
		}
	}
	.list {
		padding: 22rpx;
		box-sizing: border-box;
		.li {
			// width: 702rpx;
			width: 100%;
			height: 402rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 12rpx 0rpx #F4F6FA;
			border-radius: 16rpx;
			border: 2rpx solid #E8EBF0;
			margin-bottom: 30rpx;
			.info {
				width: 100%;
				height: 152rpx;
				// padding: 15rpx;
				display: flex;
				align-items: center;
				padding: 0 26rpx;
				box-sizing: border-box;
				.item-img{
					width: 152rpx;
					height: 152rpx;
					border-radius: 16rpx;
					overflow: hidden;
					border: 1rpx solid #d3d3d3;
					margin-right: 32rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				// .item {
				// 	font-weight: 400;
				// 	font-size: 22rpx;
				// 	color: #333333;
				// 	margin-top: 16rpx;
				// 	text {
				// 		&:nth-child(2) {
				// 			font-weight: 350;
				// 			font-size: 22rpx;
				// 			color: #545454;
				// 		}
				// 	}
				// }
			}
			
			.prize{
				width: 100%;
				text-align: right;
				padding-right: 26rpx;
				margin-top: 34rpx;
				margin-bottom: 20rpx;
			}
			.btn-group{
				display: flex;
				justify-content: flex-end;
				padding-right: 26rpx;
				.btn-item{
					width: 150rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					// background: red;
					font-size: 24rpx;
					color: #000000;
					border-radius: 8rpx;
					border: 1rpx solid #CECECE;
					margin-left: 20rpx;
				}
				.primary{
					background: #2456FF;
					border-radius: 8rpx;
					color: #fff;
				}
			}
			
			.mod {
				.m-info {
					display: flex;
					align-items: center;
					justify-content: center;
					.qrcode {
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						.code-img {
							width: 191rpx;
							height: 191rpx;
						}
						text {
							margin-top: 10rpx;
						}
						.icon-con {
							width: 100%;
							padding: 20rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.icon {
							width: 16rpx;
							height: 16rpx;
							transform: rotate(-90deg);
						}
					}
				}
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 15rpx;
					border-top: 2rpx solid #F1F1F1;
					.left {
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						txet {
							&:nth-child(2) {
								font-weight: 350;
								font-size: 22rpx;
								color: #545454;
							}
						}
					}
					.right {
						display: flex;
						align-items: center;
						image {
							width: 16rpx;
							height: 16rpx;
							&:nth-child(1) {
								width: 29rpx;
								height: 29rpx;
								margin-right: 20rpx;
							}
						}
					}
				}
				
			}
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				// border-bottom: 2rpx solid #F1F1F1;
				.left {
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					
					text {
						&:nth-child(2) {
							font-weight: 350;
							font-size: 22rpx;
							color: #545454;
							margin-left: 30rpx;
						}
					}
				}
				.right {
					font-weight: 400;
					font-size: 24rpx;
					// color: #FF2B2B;
					.rest-time{
						color: #FC391A;
					}
				}
			}
		}
	}
</style>